<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="utf-8">
    <title>文章管理</title>
    <link rel="stylesheet" href="/static/pengpai/component/pear/css/pear.css" />
    <link rel="stylesheet" href="/static/pengpai/admin/css/other/department.css"/>
</head>
<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">文章标题:</label>
                    <div class="layui-input-inline">
                        <input type="text" name="articleName" placeholder="" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">作者:</label>
                    <div class="layui-input-inline">
                        <input type="text" name="author" placeholder="" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="article-query">
                        <i class="layui-icon layui-icon-search"></i>
                        查询
                    </button>
                    <button type="reset" class="pear-btn pear-btn-md">
                        <i class="layui-icon layui-icon-refresh"></i>
                        重置
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
<div class="layui-row layui-col-space15">
    <div class="layui-col-md2">
        <div class="layui-card">
            <div class="layui-card-body">
                <div id="organizationTreeContent" style="overflow: auto">
                    <ul id="organizationTree" class="dtree organizationTree" data-id="9527"></ul>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md10">
        <div class="layui-card">
            <div class="layui-card-body">
                <table id="article-table" lay-filter="article-table"></table>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="organization-toolbar">
    <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
        <i class="layui-icon layui-icon-add-1"></i>
        新增
    </button>
    <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
        <i class="layui-icon layui-icon-delete"></i>
        删除
    </button>
</script>

<script type="text/html" id="article-isShow">
    <input type="checkbox" name="enable" value="{{d.articleId}}" lay-skin="switch" lay-text="是|否"
           lay-filter="article-isShow" {{d.isShow== '1' ? 'checked' : '' }} >
</script>

<script type="text/html" id="article-createTime">
    {{layui.util.toDateString(d.createTime, 'yyyy-MM-dd HH:mm:ss')}}
</script>
<script type="text/html" id="article-updateTime">
    {{layui.util.toDateString(d.updateTime, 'yyyy-MM-dd HH:mm:ss')}}
</script>

<script type="text/html" id="organization-bar">
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="preview"><i
            class="layui-icon layui-icon-rmb"></i>预览</button>
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="staticPage"><i
            class="layui-icon layui-icon-theme"></i>静态化</button>
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i
            class="layui-icon layui-icon-edit"></i>编辑</button>
    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i
            class="layui-icon layui-icon-delete"></i>删除</button>
</script>
<script src="/static/pengpai/component/layui/layui.js"></script>
<script src="/static/pengpai/component/pear/pear.js"></script>
<script>
    layui.use(['table', 'form', 'jquery', 'dtree', 'popup'], function() {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let dtree = layui.dtree;
        let popup = layui.popup;

        let cols = [
            [{
                type: 'checkbox'
            },
                {
                    title: '标题',
                    field: 'articleName',
                    align: 'center'
                },
                {
                    title: '所属栏目',
                    field: 'categoryName',
                    align: 'center'
                },
                {
                    title: '是否发布',
                    field: 'isShow',
                    align: 'center',
                    templet: '#article-isShow',
                },
                {
                    title: '作者',
                    field: 'author',
                    align: 'center'
                },
                {
                    title: '创建时间',
                    field: 'createTime',
                    align: 'center',
                    templet: '#article-createTime',
                },
                {
                    title: '更新时间',
                    field: 'updateTime',
                    align: 'center',
                    templet: '#article-updateTime',
                },
                {
                    title: '操作',
                    toolbar: '#organization-bar',
                    align: 'center',
                    width: 350
                }
            ]
        ]

        var DTree = dtree.render({
            elem: "#organizationTree",
            //data: data,
            initLevel: "2", //默认展开层级为1
            line: true, // 有线树
            ficon: ["1", "-1"], // 设定一级图标样式。0表示方形加减图标，8表示小圆点图标
            icon: ["0", "2"], // 设定二级图标样式。0表示文件夹图标，5表示叶子图标
            method: 'get',
            url: "/webArticle/tree"
        });

        table.render({
            elem: '#article-table',
            url: '/webArticle/list',
            height: 'full-150',
            page: true,
            cols: cols,
            skin: 'line',
            toolbar: '#organization-toolbar',
            defaultToolbar: [{
                title: '刷新',
                layEvent: 'refresh',
                icon: 'layui-icon-refresh',
            }, 'filter', 'print', 'exports']
        });

        // 绑定节点点击事件
        dtree.on("node(organizationTree)", function(obj) {
            if (!obj.param.leaf) {
                var $div = obj.dom;
                DTree.clickSpread($div); //调用内置函数展开节点
            } else {
                table.reload('article-table', {
                    where:{
                        categoryName:obj.param.context,
                        categoryId:obj.param.nodeId
                    }
                })
            }
        });

        table.on('tool(article-table)', function(obj) {
            if (obj.event === 'remove') {
                window.remove(obj);
            } else if (obj.event === 'edit') {
                window.edit(obj);
            }else if (obj.event === 'preview') {
                window.preview(obj);
            }else if (obj.event === 'staticPage') {
                window.staticPage(obj);
            }
        });

        table.on('toolbar(article-table)', function(obj) {
            if (obj.event === 'add') {
                window.add();
            } else if (obj.event === 'refresh') {
                window.refresh();
            } else if (obj.event === 'batchRemove') {
                window.batchRemove(obj);
            }
        });

        form.on('submit(article-query)', function(data) {
            table.reload('article-table', {
                where: data.field
            })
            return false;
        });
        form.on('switch(article-isShow)', function (obj) {
            let operate;
            if (obj.elem.checked) {
                operate = "publish";
            } else {
                operate = "unpublish";
            }
            let loading = layer.load();
            $.post('/webArticle/' + operate,{articleId: obj.value},function(res){
                layer.close(loading);
                if(res.success == 200){
                    layer.msg(res.msg);
                }else{
                    layer.msg(res.msg);
                }
            },"json");
        });

        window.add = function() {
            layer.open({
                type: 2,
                title: '新增文章',
                shade: 0.1,
                area: ['100%', '100%'],
                content: '/webArticle/add'
            });
        }

        window.edit = function(obj) {
            layer.open({
                type: 2,
                title: '编辑文章',
                shade: 0.1,
                area: ['100%', '100%'],
                content: '/webArticle/edit?id='+obj.data.articleId,
            });
        }

        window.preview = function(obj) {
            layer.open({
                type: 2,
                title: '预览文章',
                shade: 0.1,
                area: ['100%', '100%'],
                content: 'http://47.116.10.183/webArticle/preview?id='+obj.data.articleId,
            });
        }

        window.staticPage = function(obj) {
            $.ajax({
                url: "/webArticle/staticPage",
                dataType: 'json',
                type: 'post',
                data: {"id":obj.data['articleId']},
                success: function(result) {
                    // layer.close(loading);
                    if (result.code == 200) {
                        layer.msg(result.msg, function() {
                            // popup.success(result.msg)
                            table.reload('article-table', {
                                done: function (res, curr, count) {
                                    if (curr > 1 && res.data.length === 0) {
                                        curr = curr - 1;
                                        table.reload('article-table', {
                                            page: {
                                                curr: curr
                                            },
                                        })
                                    }
                                }
                            });
                        });
                    } else {
                        popup.failure(result.msg);
                    }
                }
            });
        }


        window.remove = function(obj) {
            layer.confirm('确定要删除该文章', {
                title: '提示'
            }, function(index) {
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: "/webArticle/del",
                    dataType: 'json',
                    type: 'post',
                    data: {"ids":obj.data['articleId']},
                    success: function(result) {
                        layer.close(loading);
                        if (result.code == 200) {
                            layer.msg(result.msg, function() {
                                obj.del();
                                table.reload('article-table', {
                                    done: function (res, curr, count) {
                                        if (curr > 1 && res.data.length === 0) {
                                            curr = curr - 1;
                                            table.reload('article-table', {
                                                page: {
                                                    curr: curr
                                                },
                                            })
                                        }
                                    }
                                });
                            });
                        } else {
                            popup.failure(result.msg);
                        }
                    }
                })
            });
        }

        window.batchRemove = function(obj) {
            let data = table.checkStatus(obj.config.id).data;
            if (data.length === 0) {
                layer.msg("未选中数据");
                return false;
            }
            let ids = "";
            for (let i = 0; i < data.length; i++) {
                ids += data[i].articleId + ",";
            }
            ids = ids.substr(0, ids.length - 1);
            layer.confirm('确定要删除这些文章', {
                title: '提示'
            }, function(index) {
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: "/webArticle/del",
                    dataType: 'json',
                    type: 'post',
                    data: {"ids":ids},
                    success: function(result) {
                        layer.close(loading);
                        if (result.code == 200) {
                            popup.success(result.msg, function () {
                                console.log(obj);
                                table.reload('article-table', {
                                    done: function (res, curr, count) {
                                        if (curr > 1 && res.data.length === 0) {
                                            curr = curr - 1;
                                            table.reload('article-table', {
                                                page: {
                                                    curr: curr
                                                },
                                            })
                                        }
                                    }
                                });
                            });
                        }else {
                            popup.failure(result.msg);
                        }
                    }
                })
            });
        }

        window.refresh = function(param) {
            table.reload('article-table');
        }
    })
</script>
</body>
</html>